Step 1: assets

Copy and paste all css, font and images to public/assets folder

Step 2: Create main html page

1. create new index.html file in public

2. copy and paste the header tag portion of html template to public/index.html

3. change path of css and font to "assets/css"

4. add in the body

               <div id="root"></div>
                

Step 3: Create individual pages

src/pages/Index.js

1. create index page Index.js in src/pages folder

2. create index component in Index.js

                import React from 'react';

                function Index(){
                  return (

                    <>
                        Home
                    </>

                  );
                }

                export default Index;
              

src/pages/About.js

              import React from 'react';

              function About(){
                return (

                  <>
                    About
                  </>

                );
              }

              export default About;

              

src/pages/Contact.js

              import React from 'react';

              function Contact(){
                return (

                  <>
                  Contact
                  </>

                );
              }

              export default Contact;

              

Step 4: page content and modification

1. copy the html content from the template and paste into src/pages/Index.js

2. change class="" to className=""

3. add end / to each html tags

                <img src="">     to <img src="" />
                <input name="" >  to <input name="" />
             

step 5 : main app component

src/App.js

              import '.App.css';

              import Index from '.pages/Index';

              function App(){

                return (

                    <div>
                       <Index />
                   </div>
                );
              }

              export default App;

            

Step 6 : page navigation

1. install react router

            npm i react-router-dom 

            

2. define router in src/App.js

              import '.App.css';
              import {BrowserRouter as router, Routes, Route} from 'react-router-dom';

              import Index from '.pages/Index';
              import About from '.pages/About';

              function App(){

                return (

                    <div>
                       <Router>
                              <Routes>
                                    <Route path="/" element={<Index />} />
                                    <Route path="/about" element={<About />} />
                                    <Route path="/contact" element={<Contact />} />
                              </Routes>
                        </Router>
                   </div>
                );
              }

              export default App;

            

3. create src/pages/Menu.js component

              import React from 'react';
              import {BrowserRouter as router, Routes, Route} from 'react-router-dom';

              function Menu(){
                return (

                  <>
                      <ul>
                         <li> <Link to="/" >Home </Link> </li>
                         <li> <Link to="/about" >About </Link> </li>
                         <li> <Link to="/contact" >Contact </Link> </li>
                      </ul>
                  </>

                );
              }

              export default Menu;

              

4. include Menu component in the view pages Index.js, About.js and Contact.js

src/pages/Index.js

              import React from 'react';
              import Menu from './Menu';

              function Index(){
                  return (

                    <>
                        <Menu />
                        
                    </>

                  );
                }

                export default Index;